{% extends 'myadmin/index.html' %}
{% block title %}
<title>后台-会员添加</title>
{% endblock %}
{% block main %}
<div class="row-content am-cf">
<script type="text/javascript" src="/static/myadmin/js/jquery.min.js"></script>
  <div class="row">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">管理组添加</div>
          <div class="widget-function am-fr">
            <a href="javascript:;" class="am-icon-cog"></a>
          </div>
          <a href="{% url 'auth_group_list' %}" class="am-btn am-btn-default am-btn-success" style="margin-left: 50px">
                    <span class="am-icon-plus"></span>返回</a>
        </div>
        <div class="widget-body am-fr">
          <form class="am-form tpl-form-line-form" action="{% url 'auth_group_add' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
            <div class="am-form-group">
              <label for="user-name" class="am-u-sm-3 am-form-label">用户名
                <span class="tpl-form-line-small-title"></span></label>
              <div class="am-u-sm-9">
                <input type="text" class="tpl-form-input"placeholder="请输入用户名" name='name'>
                <small></small></div>
            </div>
       <div class="am-form-group">
          <label for="user-name" class="am-u-sm-3 am-form-label">
              权限
          </label>
          <div class="am-u-sm-9">
             <div style="float: left;text-align: center;">
                 <p>可用权限</p>
                 <select id="select1" multiple="multiple" style="width:300px;height:200px; float:left; border:1px solid rgba(255, 255, 255, 0.2); padding:4px; ">
                    {% for i in parm %}
                     <option value="{{i.id}}" >{{i}}</option>
                    {% endfor %}
                 </select>
                 <p><button id="add_all" class="am-btn am-btn-warning am-btn-xs" type="button">全选&nbsp;&gt;</button></p>
             </div>

             <div style="float: left;width: 50px;height:200px;">
                 <ul style="margin-top: 100px;text-align: center;">
                     <li><button id="add" class="am-btn am-btn-warning am-btn-xs" type="button">&gt;</button></li>
                     <br>
                     <li><button id="remove" class="am-btn am-btn-warning am-btn-xs" type="button">&lt;</button></li>
                 </ul>
             </div>

             <div style="float: left;text-align: center;">
                 <p>已选中的权限</p>
                 <select name="prms" id="select2" multiple="multiple" style="width:300px;height:200px; float:left; border:1px solid rgba(255, 255, 255, 0.2); padding:4px; ">

                 </select>
                 <p><button id="remove_all" class="am-btn am-btn-warning am-btn-xs" type="button">全部移除</button></p>
             </div>
          </div>
      </div>

              <div class="am-u-sm-9 am-u-sm-push-3">
                <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button></div>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>

     <script type="text/javascript">
                            $('#add').click(function(){
                                $('#select1 option:selected').appendTo('#select2');
                            })
                            $('#remove').click(function(){
                                $('#select2 option:selected').appendTo('#select1');
                            })
                            $('#add_all').click(function(){
                                $('#select1 option').appendTo('#select2');
                            })
                            $('#remove_all').click(function(){
                                $('#select2 option').appendTo('#select1');
                            })
                            $('#select1').dblclick(function(){
                                $('option:selected',this).appendTo('#select2');
                            })
                            $('#select2').dblclick(function(){
                                $('option:selected',this).appendTo('#select1');
                            })

                            $('#myform').submit(function(){

                                // $('#select2 option').each(function(){
                                //     this.selected = true
                                // })

                                 // $('#select2 option').attr('selected',true) //X
                                 $('#select2 option').prop('selected',true)

                                // return false;
                            })
                            $(".tpl-btn-bg-color-success").click(function(){
                                $("#select2 option").prop("selected",true)
                            })

        </script>


  </div>
{% endblock %}